<template>
  <div class="asas">
    <!-- 请假申请表单 -->
    <h2>请假申请</h2>
    <form @submit.prevent="submitLeaveApplication">
      <div>
        <label for="userID">用户ID：</label>
        <input type="number" id="userID" v-model="leaveApplications.UserID" required />
      </div>
      <div>
        <label for="startDate">开始日期：</label>
        <input type="date" id="startDate" v-model="leaveApplications.StartDate" required />
      </div>
      <div>
        <label for="endDate">结束日期：</label>
        <input type="date" id="endDate" v-model="leaveApplications.EndDate" required />
      </div>


      <div class="qingj">
        <label for="leaveType" class="el-dropdown-link">请假类型:
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.LeaveType }}</span>
          </template>
        </label>
        <!--        <el-dropdown>-->
        <!--        <el-dropdown-menu slot="default">-->
        <!--          <el-dropdown-item>黄金糕</el-dropdown-item>-->
        <!--          <el-dropdown-item>狮子头</el-dropdown-item>-->
        <!--          <el-dropdown-item>螺蛳粉</el-dropdown-item>-->
        <!--          <el-dropdown-item>双皮奶</el-dropdown-item>-->
        <!--          <el-dropdown-item>蚵仔煎</el-dropdown-item>-->
        <!--        </el-dropdown-menu>-->
        <!--        </el-dropdown>-->

        <el-select v-model="leaveApplications" filterable placeholder="请选择">
          <el-option
            v-for="item in leaveApplications"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
          <el-option value="年假">年假</el-option>
          <el-option value="病假">病假</el-option>
          <el-option value="事假">事假</el-option>
          <el-option value="婚假">婚假</el-option>
          <el-option value="产假">产假</el-option>
          <el-option value="丧假">丧假</el-option>
          <el-option value="工伤假">工伤假</el-option>
        </el-select>

      </div>

      <div class="shenpi">
        <label for="">审批人:</label>
        <el-select v-model="RealName" filterable placeholder="请选择">
          <el-option
            v-for="item in Users"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>

      <div>
        <label for="reason">请假理由:</label>
        <textarea id="reason" v-model="leaveApplication.Reason" required></textarea>
      </div>
      <div>

      </div>
      <button type="submit">提交申请</button>
    </form>
  </div>
</template>

<script>
import Cookies from 'js-cookie';
import {findAll} from "@/api/LeaveApplicationController/LeaveApplicationController";
import axios from "axios";

export default {
  data() {
    return {
      RealName:'',
      Users: [],
      leaveApplication: {
        UserID: 0,
        StartDate: '',
        EndDate: '',
        LeaveType: '',
        Reason: '',
      },
      leaveApplications: ["年假","病假","事假","婚假","产假","丧假","工伤假",],
    };
  },
  mounted() {
    // this.fetchLeaveApplications();
    // this.fetchLeaveApplicationOptions();
    this.submitLeaveApplication();
    this.deleteLeaveApplication();
  },
  methods: {
    // fetchLeaveApplicationOptions() {
    //   // axios.get('/api/leave - application - options')
    //     findAll().then(response => {
    //       this.leaveApplications = response.data;
    //       console.log(this.leaveApplications)
    //
    //     })
    //     .catch(error => {
    //       console.error('获取请假类型选项失败', error);
    //     });
    // },
    submitLeaveApplication() {
      let user = JSON.parse(Cookies.get("SET_USER"));
      user.UserID
      user.userName
      user.password
      user.RealName
      user.title
      user.leadershipStatus
      user.gender
      user.status

      axios.post('/api/leave-applications', this.leaveApplication)
        .then(response => {
          console.log('请假申请提交成功', response.data);
          this.fetchLeaveApplications();
          this.resetForm();
        })
        .catch(error => {
          console.error('请假申请提交失败', error);
        });
    },
    // fetchLeaveApplications() {
    //   axios.get('/api/leave-applications')
    //     .then(response => {
    //       this.leaveApplications = response.data;
    //     })
    //     .catch(error => {
    //       console.error('获取请假申请列表失败', error);
    //     });
    // },
    deleteLeaveApplication(leaveID) {
      axios.delete(`/api/leave-applications/${leaveID}`)
        .then(() => {
          this.fetchLeaveApplications();
        })
        .catch(error => {
          console.error('删除请假申请失败', error);
        });
    },
    resetForm() {
      this.leaveApplication = {
        UserID: 0,
        StartDate: '',
        EndDate: '',
        LeaveType: '',
        Reason: '',
      };
    },
  },
};
</script>

<style>
.el-dropdown-link {
  cursor: pointer;
}
.el-icon-arrow-down {
  font-size: 12px;
}

.asas{
  display: flex;
}
.shenpi{

  margin-right: 10px;
}

.qingj{

  margin-right: 10px;
}

select:focus {
  border-color: #007bff;
  outline: none;
}


select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 18px;
  font-size: 16px;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

/* 整体表单容器样式 */
form{
  width: 100%;
  max-width: 600px; /* 限制最大宽度，避免在大屏幕上过于分散 */
  margin: 0 auto; /* 水平居中 */
  padding: 20px;
  box-sizing: border-box; /* 确保内边距不影响整体宽度 */
  background-color: #f4f4f4; /* 柔和的背景色 */
  border-radius: 8px; /* 圆角效果，更显柔和美观 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 轻微阴影，增加立体感 */
}

/* 标题样式 */
h2 {
  text-align: center; /* 标题居中 */
  color: #333; /* 深灰色标题文字，更清晰醒目 */
  margin-bottom: 20px;
}

/* 表单标签样式 */
label {
  display: block; /* 独占一行，清晰区分每个输入项 */
  font-size: 16px; /* 适当字体大小 */
  margin-bottom: 8px; /* 与输入框保持合适间距 */
  font-weight: 500; /* 适度加粗，增强区分度 */
}

/* 输入框和文本域通用样式 */
input,
textarea {
  width: 100%;
  padding: 12px; /* 增加内边距，输入更舒适 */
  border: 1px solid #ccc; /* 灰色边框 */
  border-radius: 4px; /* 输入框圆角 */
  margin-bottom: 18px; /* 输入框之间的间距 */
  font-size: 16px; /* 输入文字大小 */
  box-sizing: border-box; /* 保证内边距不撑大盒子 */
  transition: border-color 0.3s ease; /* 边框颜色过渡效果 */
}

input:focus,
textarea:focus {
  border-color: #007bff; /* 输入框获得焦点时边框变色 */
  outline: none; /* 去除默认的聚焦外框 */
}

/* 按钮样式 */
button {
  width: 100%;
  padding: 12px;
  background-color: #007bff; /* 蓝色按钮背景色，常见且醒目 */
  color: white; /* 白色文字，与背景形成对比 */
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer; /* 鼠标悬停变为手型 */
  transition: background-color 0.3s ease; /* 背景色过渡效果 */
}

button:hover {
  background-color: #0056b3; /* 鼠标悬停时按钮背景色加深 */
}

/* 响应式设计，在小屏幕设备上适当调整样式 */
@media screen and (max-width: 600px) {
  .form-container {
    padding: 15px; /* 减小内边距 */
  }
  input,
  textarea {
    margin-bottom: 15px; /* 减小输入框间距 */
  }
}
</style>
